<layout-header></layout-header>

<nav class="container-xl mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a routerLink="/welcome">首页</a></li>
        <li class="breadcrumb-item active">可用指令</li>
    </ol>
</nav>

<div class="container-xl mb-3">
    <div class="text-end mb-3">
        @if (loading) {
        <button class="btn btn-light" disabled>
            <span class="spinner-grow spinner-grow-sm"></span> 加载中
        </button>
        } @else {
        <button class="btn btn-primary" (click)="getRobotHandlers(true)">重载</button>
        }
    </div>

    <table class="table table-hover align-middle">
        <thead class="table-light">
            <tr>
                <th scope="col">指令</th>
                <th scope="col">场景</th>
                <th scope="col">级别</th>
                <th scope="col">顺序</th>
                <th scope="col" class="d-none d-md-table-cell">描述</th>
            </tr>
        </thead>
        <tbody>
            @for (item of robotHandler; track item.command) {
            <tr>
                <th scope="row">{{item.command}}</th>
                @if (wcfChatrooms[item.roomid]) {
                <td>{{wcfChatrooms[item.roomid].name || item.roomid}}</td>
                } @else {
                <td>{{specialRooms[item.roomid] && specialRooms[item.roomid].name || '-'}}</td>
                }
                <td>{{userLevels[item.level] && userLevels[item.level].name || '-'}}</td>
                <td>{{item.order}}</td>
                <td class="d-none d-md-table-cell">{{item.describe}}</td>
            </tr>
            }
        </tbody>
    </table>
</div>